<!DOCTYPE html>
<html>

<head>
    <title>canvas绘制鲜花</title>
</head>

<body>
    <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;margin:50 auto;"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.fillStyle = "#ED6E91";

        //花瓣右上
        context.beginPath();
        context.arc(550, 200, 50, 0, 2 * Math.PI);
        context.stroke();
        context.fill();

        //花瓣右下
        context.beginPath();
        context.arc(550, 300, 50, 0, 2 * Math.PI);
        context.stroke();
        context.fill();

        //花瓣左上
        context.beginPath();
        context.arc(450, 200, 50, 0, 0.5 * Math.PI, true);
        context.stroke();
        context.fill();

        //花瓣左下
        context.beginPath();
        context.arc(450, 300, 50, 0, 1.5 * Math.PI);
        context.stroke();
        context.fill();

        //花蕊
        context.beginPath();
        context.fillStyle = "#f90";
        context.arc(500, 250, 50, 0, 2 * Math.PI);
        context.stroke();
        context.fill();

        //花径
        context.beginPath();
        context.arc(150, 300, 350, 0, 0.3 * Math.PI);
        context.stroke();

        //右边的叶子
        context.beginPath();
        context.fillStyle = "green";
        context.arc(468, 400, 50, 0, 0.5 * Math.PI);
        context.closePath();
        context.stroke();
        context.fill();

        //左边的叶子
        context.beginPath();
        context.fillStyle = "green";
        context.arc(468, 400, 50, 0.5 * Math.PI, Math.PI, false);
        context.closePath();
        context.stroke();
        context.fill();
    </script>
</body>

</html>